<!DOCTYPE >
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="language" content="en" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
	<style type="text/css" media="screen"> 
		html, body	{ height:100%; }
		body { margin:0; padding:0; overflow:auto; text-align:center; }
		ul{list-style-type: none;margin:0px;padding-left:20px;}
		ul li{height:20px;}
		ul li span {color:blue;}
		.static {position:static;}
		.relative {position:relative; left:auto;top:auto;bottom:auto;right:auto;}
		#mask,#cvsBook{ position:absolute;left:0px;top:0px;width:100%;height:100%;}
		#maskPopup { position:absolute;left:0px;top:0px;width:100%;height:100%; background-color:#CCCCCC; opacity:0.5; display:none;}
		#cvsOthers,#cvsYoutube { position:absolute;left:0px;top:0px;background-color:#eeeeee;}
		#bottomBar { position:absolute;bottom:0px;width:100%;height:40px;
				align:center;display:none}
		#bottomBarBg { width:100%;height:40px;
				align:center;background-color:5c5c5c;}
		#bottomTable{height:100%;}
		#tbPage{width:35px;}
		#bottomTable img {margin-left:5px;}
		#tbPageCount {color:#ffffff;}
		#topBar {position:absolute; top:0px;display:none;background-color:#cccccc;
			margin-right: auto; margin-left: auto; width:500px;
			border:1px solid #666666;-webkit-border-radius: 5px; 
		}
		#topBar #close{	position:absolute; top:2px; right:5px;}
		#topBarTitle {position:absolute;top:0px;width:100%;height:30px;background-color:888888;text-align:left;}
		#topBarContent {position:absolute;top:35px;width:100%;height:260px;text-align:left;overflow:auto;}
		#topTitle {position:absolute;top:5px;left:5px;}
		.thumb {max-width:80px;max-height:78px;margin:8px;}
		#searchBox { padding-left:5px;};
		.colPage {width:50px;}
		.colContent {}
		.searchResults { padding:20px; font-size:12; color:#333333; }
		.searchResults td {font-size:12;color:#333333;vertical-align:top;};
	</style>
	<script src="http://www.google-analytics.com/ga.js"></script>
	<script>
        function isNUM(e)
        {
            var iKeyCode = e.keyCode;
            if(!(((iKeyCode >= 48) && (iKeyCode <= 57)) || (iKeyCode == 13) || (iKeyCode == 46) || (iKeyCode == 45) || (iKeyCode == 37) || (iKeyCode == 39) || (iKeyCode == 8)))
            {   
				return false;
            }
			else
			{
				if(iKeyCode == 13)
				{
					RunTime.getInputAndJumpToPage();
				}
				return true;
			}
        } 
		
		function onSearchInputKeyPress(e)
		{
            var iKeyCode = e.keyCode;
			if(iKeyCode == 13)
			{
				search();
			}
		}
		
		function onInputKeyPress(e)
		{
            var iKeyCode = e.keyCode;
			if(iKeyCode == 13)
			{
				inputPwd();
			}
		}
		
		function updateOrientation()
		{
			RunTime.saveCurrentPageNum();
			RunTime.reload();
		}
		
		function gotoPage(val)
		{
			RunTime.flipBook.turnToPage(val);
			hideTopBar();
		}
		
		function hideTopBar()
		{
			RunTime.flipBook.hideTopBar();
		}
		
		function search()
		{
			RunTime.flipBook.search();
		}
		
		function inputPwd()
		{
			RunTime.flipBook.inputPwd();
		}
		
		function clickInvoke(e)
		{
			alert("click");
		}
		
		function onDoubleClick(e)
		{
			alert("dblclick");
		}
		
		function clearPopupContents()
		{
			RunTime.clearPopupContents();
		}
		
		function clearAudio()
		{
			RunTime.clearAudio();
		}
		
	</script>
</head>
<body scroll="no" onorientationchange="updateOrientation()" onselectstart="return false" >
	<canvas id="cvsBook" width="1" height="1" onselectstart="return false">this browser does not support canvas…</canvas>
	<div id="hiddenSearch" style="display:none">
		<div id="searchBox">
		<input id="tbKeyword"  onkeypress="return onSearchInputKeyPress(event)" />
		<input id="btnSearch" type="button" value="Search" onclick="search();" />
		<div class="searchResults">			
		</div>
		</div>
	</div>
	<div id="hiddenInput" style="display:none;">
		<div id="inputBox" style="width:300px; height:120px;">
		<p>Please input password below:</p>
		<input id="tbKeyword" type="password" style="width:120px;height:20px;"  onkeypress="return onInputKeyPress(event)" />
		<input type="button" style="height:20px;" value="Submit" onclick="inputPwd();" />
		</div>
	</div>
	<div id="mask" ></div>
	<div id="maskPopup"></div>
	<div id="cvsVideo" ></div>
	<div id="cvsOthers"></div>
	<div id="cvsAudio"></div>
	<!--
	<div id="cvsYoutube">
	<iframe frameborder="0" type="text/html" height="390" width="640" src="http://www.youtube.com/embed/JW5meKfy3fY?controls=0&enablejsapi=1&origin=http://mysite.com"></iframe>
	</div>
	-->
	<div id="topBar">
		<div id="topBarTitle">
		<span id="topTitle">Table of Contents:</span>
		<img id="close" width="24" height="24" src="content/images/close.png"  onclick="hideTopBar();" />			
		</div>
		<div id="topBarContent"></div>
	</div>
	<div id="bottomBar">
		<div id="bottomBarBg" />
		<table id="bottomTable" align="center" width="100%">
			<tr valign="middle">
				<td width="35%" style="padding-left:50px;" id="menuParent">
					<img id="btnContents" src="content/images/btnContents.png" style="display:none" width="24" height="24" />
					<img id="btnThumbs" src="content/images/btnThumbs.png" style="display:none" width="24" height="24" />
					<img id="btnSearch" src="content/images/btnSearch.png" style="display:none" width="24" height="24" />
					<img id="btnShowTxt" src="content/images/btnShowTxt.png" style="display:none" width="24" height="24" />
					<img id="btnAutoFlip" src="content/images/btnAutoFlip.png" style="display:none" width="24" height="24" />
					<img id="btnZoom" src="content/images/btnZoom.png" style="display:none" width="24" height="24" />
				</td>
				<td width="30%" align="center" valign="bottom">
					<img id="btnFirstPage" src="content/images/btnFirstPage.png" width="24" height="24" />
					<img id="btnPrevPage" src="content/images/btnPrevPage.png" width="24" height="24" />
					&nbsp;&nbsp;
					<input id="tbPage" onkeypress="return isNUM(event)" style="bottom:8px;text-align:center;" class="relative"></input>&nbsp;&nbsp;<span id="tbPageCount" style="bottom:5px;" class="relative">/&nbsp;</span>&nbsp;
					<img id="btnNextPage" src="content/images/btnNextPage.png" width="24" height="24" />
					<img id="btnLastPage" src="content/images/btnLastPage.png" width="24" height="24" />
				</td>
				<td width="35%" style="padding-right:50px;" align="right">
					<img id="imgLogo" height="24" style="display:none" />
				</td>
			</tr>
		</table>
	</div>
    <script src="html5.js"></script>
</body>
</html>
